<template>
  <div id="app">
    <h2>我的购物车</h2>

    <el-table
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
      :row-key="(row) => id"
    >
      <!-- v-if="false" 让这个列不显示 -->
      <el-table-column prop="oid" width="55" v-if="false" />
      <el-table-column prop="iid" width="55" v-if="false" />
      <el-table-column prop="uid" width="55" v-if="false" />
      <el-table-column property="name" label="商品名" show-overflow-tooltip />
      <el-table-column property="prices" label="商品单价" width="120" />

      <el-table-column label="创建日期" width="120">
        <template #default="scope">{{ scope.row.createtime }}</template>
      </el-table-column>
      <el-table-column label="更新日期" width="120">
        <template #default="scope">{{ scope.row.updatetime }}</template>
      </el-table-column>

      <el-table-column
        property="number"
        label="购买数量"
        show-overflow-tooltip
      />
      <el-table-column label="操作">
        <template v-slot="editData"
          ><el-button @click="editNumber(editData.row, true)">+</el-button>
          <el-button @click="editNumber(editData.row, false)">-</el-button>
          <!-- <el-button @click="payAlone(editData.row)">单独下单</el-button> -->
          <el-button @click="opendialog(editData.row)">单独下单</el-button>
          <el-button @click="deleteByCid(editData.row.cid)"
            >删除</el-button
          ></template
        >
      </el-table-column>
    </el-table>
    <el-dialog
      width="30%"
      title="是否确认下单"
      :visible.sync="dialogVisible"
      v-model="dialogVisible"
    >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="confirmChange"
          >确定下单</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      width="30%"
      title="是否购买多个商品"
      :visible.sync="dialogVisible1"
      v-model="dialogVisible1"
    >
      <span
        >购买数量为0的商品将不作改变，而数量不为0的商品则全部购买，请确认!</span
      >
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogVisible1 = false"
          >取 消</el-button
        >
        <el-button size="small" type="primary" @click="confirmChange1"
          >确定下单</el-button
        >
      </span>
    </el-dialog>
    <el-row>
      <el-col :span="5">
        <div class="total_btn">
          <span id="tp">总价: {{ totalPrices }} 元</span>
        </div>
      </el-col>
      <el-col :span="15">
        <div class="total_btn">
          <el-button id="btn" @click="clearShopCart">清空购物车</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<style>
#tp {
  float: left;
}
#btn {
  float: right;
}
</style>
<script>
import { select_shopcar_list } from '../api/index'
import { pay } from '../api/index'
import { delete_by_cid } from '../api/index'
import { clear_shop_cart } from '../api/index'
import { mapGetters } from 'vuex' // mapGetters从整个工程其他地方获取数据
import { ElMessage } from 'element-plus'

export default {
  name: 'home',

  data() {
    return {
      dialogVisible: false,
      dialogVisible1: false,
      totalPrices: 0,
      tableData: [],
      userId: this.$store.state.userId,
      alonePayItem: {},
    }
  },
  computed: {
    // 监控数据的获取
    ...mapGetters([
      'userId',
      'userName',
      'password',
      'realname',
      'phone',
      'address',
      'email',
      'sex',
      'idCard',
      'age',
      'type',
    ]),
  },
  mounted() {
    this.getShopCartByuserId(this.userId)
  },
  created() {},
  updated() {
    this.caltotalprices()
  },
  methods: {
    opendialog(row) {
      if (row.number <= 0) {
        ElMessage({
          message: '请选择购买数量',
          type: 'success',
        })
        return
      }
      this.dialogVisible = true
      this.alonePayItem = row
    },
    confirmChange() {
      this.payAlone(this.alonePayItem)
      this.dialogVisible = false
    },
    deleteByCid(cid) {
      console.info('cid: ' + cid)
      delete_by_cid(cid).then((res) => {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        //重新渲染
        this.getShopCartByuserId(this.userId)
      })
    },
    payAlone(row) {
      console.log('iid ' + row.iid)
      console.log('uid ' + row.uid)
      console.log('cid ' + row.cid)
      pay(row).then((res) => {
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        this.getShopCartByuserId(this.userId)
      })
    },
    getShopCartByuserId(userId) {
      select_shopcar_list(userId)
        .then((res) => {
          this.tableData = res.map.shopCarItems
        })
        .catch()
    },
    clearShopCart() {
      let flag = false
      this.tableData.forEach((item, index) => {
        if (item.number > 0) {
          flag = true
        }
      })
      if (flag) {
        this.dialogVisible1 = true
      } else {
        ElMessage({
          message: '请选择要购买的商品',
          type: 'success',
        })
        return
      }
    },
    confirmChange1() {
      clear_shop_cart(this.tableData)
        .then((res) => {
          ElMessage({
            message: res.msg,
            type: 'success',
          })
          this.getShopCartByuserId(this.userId)
          this.caltotalprices()
        })
        .catch()
      this.dialogVisible1 = false
    },
    editNumber(row, bool) {
      if (bool) {
        row.number++
      } else {
        if (row.number < 1) return
        row.number--
      }
      this.caltotalprices()
    },
    caltotalprices() {
      let price = 0
      this.tableData.forEach((item, index) => {
        price += item.number * item.prices
      })
      this.totalPrices = price.toFixed(2) //toFixed(2)保留两位小数
    },
    handleSelectionChange(ids) {
      console.log('ids  ' + ids)
    },
  },
}
</script>
